@charset 'utf-8';

@import 'common';

.web{
    width: 100%;
    height: 100%;
    position: relative;
}

html,body{
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: gr(87);
    position: absolute;
    top: 0;
    border-bottom: gr(1) solid #c1c1c1;
}

section{
    width: 100%;
    position: absolute;
    top: gr(88);
    bottom: 0;
    overflow-y:scroll ;
    -webkit-overflow-scrolling: touch;
}

.foot-wrap{
    width: 100%;
    height: gr(248);
   
    background: #f3f4f6;
}


header{
    .arrow{
        width: gr(43);
        height: gr(37);
        font-size: gr(37);
        text-align: center;
        margin-top: gr(26);
        margin-left: gr(30);
        float: left;
 
        i{
            color: #848689;
            vertical-align: top;
        }
    }
    p{
        width: gr(176);
        height: gr(37);
        line-height: gr(37);
        font-size: gr(28);
        text-align: center;
        margin: gr(26) auto 0;
    }
    span{
        display: block;      
        font-size: gr(30);
        float: right;
        margin-top: gr(26);
        margin-right: gr(20);
    }
}


.banner{
    width: 100%;
    height: gr(309);
    position: relative;
   
    .background{
        width: 100%;
        height: 100%;
         img{
             width: 100%;
        }
    }
    .sign{
        width: gr(205);
        height: gr(186);
        position: absolute;      
        top: gr(57);
        left: gr(219);
        p{
            font-size: gr(35);
            text-align: center;
            margin-top: gr(15);
            color: white;
         }
        .imgwrap{
            width: gr(125);
            height: gr(125);
            border-radius: 50% 50%;
            border: gr(5) solid #deb2a7;
             margin: 0 auto;
            background: white;
            img{
                width: 100%;
            }
        }
    }
}

nav{
    width: 100%;
    height: gr(60);
    font-size: gr(24);
    background: #f3f4f6;
    p{
        float: left;
        line-height: gr(60);
        margin-left: gr(20);
        color: #666666;
    }
    .function{
        width: gr(250);
        height: gr(60);
        float: right;
    }
    .left{
        width: gr(120);
        height: gr(60);
        line-height: gr(60);
        float: left;
        font-size: 0;
        span:first-of-type{
            display: inline-block;
            width: gr(32);
            height: gr(32);
            vertical-align: middle;
            img{
                width: 100%;   
                height: 100%;
                vertical-align: top;
            }
        }
        span:last-of-type{
            vertical-align: middle;
            margin-left: gr(12);
            a{
                 color: #666666;
            }
        }
        span{
            font-size: gr(24);
            line-height: gr(60);
        }
    }
     .right{
        width: gr(120);
        height: gr(60);
        float: left;
        line-height: gr(60);
        font-size: 0;
        span:first-of-type{
            display: inline-block;
            vertical-align: middle;
            width: gr(32);
            height: gr(32);         
            img{
                width: 100%;  
                height: 100%;
                vertical-align: top; 
            }
        }
         span:last-of-type{
            vertical-align: middle;
            margin-left: gr(12);
            color: #666666;
        }
        span{
            font-size: gr(24);
             line-height: gr(60);
        }
    }
}

.ticket{
    width: gr(600);
    height: gr(150);  
    margin: 0 auto;   
    li{
        width: gr(189);
        height: gr(110);
        margin-top: gr(20);
        float: left;
        a{
            display: inline-block;
            width: 100%;
            height: 100%;
            img{
                width: 100%;
            }
        }
    }
    li:nth-of-type(2),li:nth-of-type(3){
        margin-left: gr(16);
    }
}


.product{
    width: gr(600);
    height: gr(461);
    margin: 0 auto;
    padding-top: gr(35);
    border-bottom: gr(1) solid #e0e0e0;
    p:first-of-type{
        width: gr(581);
        margin: 0 auto;
        font-size: gr(28);
        line-height: gr(40);
        color: #333333;
    }
    p:last-of-type{
        width: gr(581);
        margin: 0 auto;
        font-size: gr(24);
        margin-top: gr(5);
        line-height: gr(35);
        color: #999999;
    }
    ul{
        width: gr(581);     
        margin: gr(26) auto 0;
        li{
            width: gr(185);
            height: gr(185);
            margin-left: gr(13);
            float: left;
            img{
                width: 100%
            }
        }
        li:first-of-type{
            margin-left: 0;
        }
    }
    .priceAndBuying{
        width: gr(579);
        height: gr(90);
        margin: 0 auto;
        h6{
            color:#666666;
            float: left;
            font-weight: normal;
            line-height: gr(90);
        }
        .buy-btn{
            width: gr(44);
            height: gr(44);
            float: right;
            margin-top: gr(25);
            line-height: gr(90);
            img{
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }
    }
}

.product-first{
    padding-top: 0;
}

.product-last{
    border-bottom: none;
}

.foot-nav{
    width: gr(579);
    height: gr(92);
    margin: 0 auto;
    font-size: 0;
    color: #666666;
    border-bottom: gr(1) solid #e0e0e0;
    span:first-of-type{
      display: inline-block;
      width: gr(271);
      height: gr(92);
      text-align: right;
      font-size: gr(24);
      line-height: gr(92);
    }
     span:last-of-type{
      display: inline-block;
      width: gr(271);
      height: gr(92);
      text-align: left;
      margin-left: gr(37);
      font-size: gr(24);
      line-height: gr(92);
    }
}

.foot-logo{
    width: gr(161);
    height: gr(95);
    margin: gr(47) auto 0;
    img{
        width: 100%;
    }
}


.mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
}

.cart{
    width: gr(530);
    height: 100%;
    background: white;
    position: absolute;
    right: 0;  
    transform: translateX(100%); 
    transition: transform 300ms ease-in-out;
}


.desc-wrap{
    width: 100%;
    height: gr(185);
    border: gr(1) solid #e0e0e0;
}

.product-desc{
    width: gr(494);
    height: gr(160);
    margin: gr(6) auto 0;
    .left{
        width: gr(158);
        height: gr(158);
        border: gr(1) solid #d7d7d7;
        float: left;
        img{
            width: 100%;
        }
    }
    .right{
        width: gr(332);
        height: gr(158);
        float: left;
        p:first-of-type{
            font-size: gr(25);
            color: #333333;
            line-height: gr(38);
            margin-left: gr(15);
        }
        h6{
            font-size: gr(23);
            color: #cc3333;
            margin-top: gr(16.5);
            margin-left: gr(15);
        }
        p:last-of-type{
            font-size: gr(22);
            color: #b8b8b8;
            margin-top: gr(13.5);
            margin-left: gr(15);
        }
    }
}


.size{
    .row{
        width: gr(492);
        height: gr(50);
        margin: gr(19) auto;
        h6{
            width: gr(100);
            height: 100%;
            font-size: gr(25);
            color: #666666;
            float: left;
            text-align: center;
            line-height: gr(50) ;
            font-weight: normal;
        }
        p{
            float: left;
            width: gr(388);
            height: gr(48);
            font-size: gr(25);
            text-align: center;
            border: gr(1) solid #d7d7d7;
            line-height: gr(50) ;
            border-radius: gr(7);
            color: #666666;
        }
               
    }
    .row:nth-child(2)>p{
        width: gr(208);
    }
    .row:nth-child(3)>p{
        width: gr(258);
    }
    .row:last-child>p{
        width: gr(208);
        border: gr(1) solid #cccccc;
         span{
            width: 34%;
            height: 100%;
            text-align: center;
            display: inline-block;
            color: #444a4d;
            line-height: gr(50);
         }
         input{
            width: 30%;
            height: 100%;
            border: none;
            vertical-align: top;
            border-left: gr(1) solid #cccccc;
            border-right: gr(1) solid #cccccc;
            appearance: none;
            -webkit-appearance: none;
            line-height: gr(50);
        }
        input::-webkit-input-placeholder{
            color: #8f8f8f;
            text-align: center;
            line-height: gr(50);
        }
    }
   

}

.select-btn{
    width: 100%;
    height: gr(100);
    position: absolute;
    bottom: 0;
    font-size: 0;
    li{
        width: 50%;
        display: inline-block;
        font-size: gr(31);
        line-height: gr(100);
        text-align: center;
        color: white;
    }
    li:first-of-type{
        background: #e7a311;
    }
     li:last-of-type{
        background: #cc3333;
    }
}

.animation-translate{
    transform: translateX(0);
}


.success-prompt{
    width: gr(249);
    height: gr(183);
    position: absolute;
    top: gr(437);
    left: gr(196);
    z-index: 100;
    display: none;
    img{
       width: 100%;
    }
}


.spread-prompt-wrap{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 150;
    display: none;
//  opacity: 0;
    .white-wrap{
        width: 100%;
        height: gr(720);
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        transform: translateY(gr(720));
        transition: all 300ms ease-in-out ;
        background: white;
        .spread-prompt{
            width: gr(501);
            height: gr(579);
            margin: 0 auto;
            li{
                width: gr(105);
                float: left;
                margin-left: gr(50);
                h6{
                    font-size: gr(21);
                    color: #999999;
                    text-align: center;
                    font-weight: normal;
                }
                .imgwrap{
                    width: gr(105);
                    height: gr(105);
                    background: white;
                    img{
                        width: 100%;
                    }
                }
            }
            
            li:nth-child(1),li:nth-child(4),li:nth-child(7){
                margin-left: gr(40);
            }
            li:nth-child(4),li:nth-child(5),li:nth-child(6){
                margin-top: gr(47);
                margin-bottom: gr(47);
            }
            li:nth-child(1),li:nth-child(2),li:nth-child(3){
                margin-top: gr(38);
            }
        }
        .spread-cancel{
            width: 100%;
            height: gr(103);
            text-align: center;
            color: #333333;
            line-height: gr(103);
            border-top: gr(1) solid #e0e0e0;
        }
    }
}

.spread-prompt-wrap .white-wrap.white-animation{
   transform: translateY(0);
}

.spread-prompt-wrap .white-wrap.close-white-animation{
   transform: translateY(gr(720)); 
}

.sale-prompt {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 122;
    .inner{
        width: gr(550);
        height: gr(300);
        background: #f8f8f8;
        border-radius: gr(10);
        margin: 50% auto 0;
        .top{
            width: gr(500);
            height: gr(154);
            margin: 0 auto;
            border-bottom: gr(1) solid #dcdcdc;
//          text-align: center;
//          line-height: gr(154);
            font-size: gr(23);
            color: #666666;    
            p:first-of-type{
                font-size: gr(26);
                height: gr(26);
                padding-top: gr(27);
                color: #cc3333;
            }  
            p:nth-of-type(2){
                font-size: gr(22);
                height: gr(22);
                margin-top: gr(27);
                color: #333333;
            } 
            p:nth-of-type(3){
                font-size: gr(19);
                height: gr(19);
                margin-top: gr(14);
                color: #666666;
            }    
        }
        .bottom{
            width: gr(500);
            height: gr(144);
            margin: 0 auto;
            font-size: 0;
            padding-top: gr(32);
            span{
                width: gr(235);
                height: gr(80);
                font-size: gr(27);
                display: inline-block;
                text-align: center;
                line-height: gr(80);
                border-radius: gr(5);
            }
            span:first-of-type{
               color: #666666;
               background: white;
               border: gr(1) solid #b7b7b7;
            }
            span:last-of-type{
               color: white;
               background: #d62d31;
               margin-left: gr(25);
            }
        }
    }
}

.to-top-btn{
    width: gr(80);
    height: gr(80);
    position: fixed;
    right: gr(30);
    bottom: gr(336);
    display: none;
    z-index: 150;
    img{
        width: 100%;      
    }
}
